<template>
    <div :id="uuid" :style="style">

    </div>
</template>

<script>
    import * as echarts from 'echarts';
    const idGen = ()=>{
        return new Date().getTime()
    }
    export default {
        data() {
            return {
                uuid:null,
                myChart:null,
                options:{}
            }
        },
        created(){
            this.uuid = idGen()
        },
        watch:{
            width(){
                if (this.myChart){
                    this.myChart.resize({
                        animation:{
                            duration:500
                        }
                    })
                }
            },
            options(){
                if (this.myChart){
                    this.myChart.setOption(this.options,{
                        notMerge:true
                    })
                }
            }
        },
        computed:{
            style(){
                return {
                    height: this.height,
                    width: this.width
                }
            }
        },
        props:{
            height:{
                type:String,
                default:'400px',
            },
            width:{
                type: String,
                default: '800px',
            }
        },

        mounted(){
            this.myChart = echarts.init(document.getElementById(this.uuid));
            // 指定图表的配置项和数据
            this.options = {
                title: {
                    text: 'Stacked Line'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: 'Direct',
                        type: 'line',
                        stack: 'Total',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: 'Search Engine',
                        type: 'line',
                        stack: 'Total',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            };
            this.myChart.setOption(this.options);
        },
    }

</script>